<template>
	<view class='login'>
		<view class='content'>
			<view class='titles'>
				<view class='titleOne'>登录发现更多精彩</view>
				<view class='titleTwo'>欢迎登录一站式上门洗护平台</view>
			</view>
			<view class='forms'>
				<view class='formLine dFlex jBetween_aCenter'>
					<view class='lineTitle'>手机号</view>
					<view class='lineVal dFlex jBetween_aCenter'>
						<view class='iptBox'>
							<input type="tel" v-model="loginInfo.tel" placeholder="请输入手机号">
						</view>
					</view>
				</view>
				<view class='formLine dFlex jBetween_aCenter'>
					<view class='lineTitle'>密码</view>
					<view class='lineVal dFlex jBetween_aCenter'>
						<view class='iptBox'>
							<input type="password" v-model="loginInfo.password" placeholder="请输入密码">
						</view>
					</view>
				</view>
			</view>
			<view class='redBtn' @click='mobileLogin'>登录</view>
			<view class="protocal dFlex jCenter_aCenter+">
				<view class="statusIcon imgPublic" @tap='flag = !flag'>
					<image v-if="!flag" src="https://wx.gdxixiashi.com/public/images/car/weixuan@2x.png" mode="widthFix"></image>
					<image v-if="flag" src="https://wx.gdxixiashi.com/public/images/car/yixuan@2x.png" mode="widthFix"></image>
				</view>
				<view class="showTxt">已阅读并同意<view class="txt" @tap='goPage(6,1)'>用户协议</view>和<view class="txt" @tap='goPage(7,2)'>隐私政策</view></view>
			</view>
			<view class='btnTool dFlex jBetween_aCenter'>
				<navigator url="./findPwd" hover-class="none" class='regist'>忘记密码</navigator>
				<navigator url="./mobileRegist" hover-class="none" class='regist'>立即注册</navigator>
			</view>
			<!-- <view class="loginWay dFlex jCenter_aCenter">
				<view class="wayIcon imgPublic">
					<image src="https://wx.gdxixiashi.com/public/images/person/weixin@2x.png" mode="widthFix"></image>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import Push from '@/tools/push.js';
	export default {
		data() {
			return {
				loginInfo:{
					tel:"",
					password:"",
					clientid:''
				},
				flag:false,
				
			};
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		methods:{
			goPage(idx,status){
				if(idx == '6' || idx == '7'){
					uni.navigateTo({
						url:'./xieyi?status='+status, 
					})
				}
			},
			// 登录
			mobileLogin(){
				if(!this.loginInfo.tel){
					uni.showToast({
						title:"请输入手机号码",
						icon:"none"
					})
					return;
				}
				if(!this.loginInfo.password){
					uni.showToast({
						title:"请输入密码",
						icon:"none"
					})
					return;
				}
				if(!this.flag){
					uni.showToast({
						title:'请先阅读并同意相关协议',
						icon:'none'
					})
					return;
				}
				//#ifdef APP-PLUS
				var pinf = plus.push.getClientInfo();
				this.loginInfo.clientid = pinf.clientid; //客户端标识
				//#endif 
				this.tool.getData('Regist/Login',this.loginInfo).then(res=>{
					if(res){
						uni.showToast({
							title:'登录成功',
							icon:'success'
						})
						uni.setStorageSync('userId',res.memberId);
						//#ifdef APP-PLUS  
						Push.setAlias(res.memberId);
						//#endif  
						if(uni.getStorageSync('spreadId')){
							uni.removeStorageSync('spreadId');
						}
						if(res.spreadId){
							getApp().globalData.userId = res.memberId;
						}
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/home'
							})
						},1650)
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			
			// 返回
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #f6f6f6;
	}
	.login{
		width: 100%;
		height: 100%;
		overflow:hidden;
		.content{
			width: 80%;
			margin: 15% auto 0;
			.loginWay{
				width: 100%;
				margin-top:50px;
				.wayIcon{
					width:40px;
					height:40px;
				}
			}
			.protocal{
				width: 100%;
				font-size: 12px;
				margin-top: 12px;
				color:#afafaf;
				.statusIcon{
					width: 15px;
					height: 15px;
					margin-right: 8px;
				}
				.showTxt{
					flex:1;
					.txt{
						display: inline-block;
						padding: 0 4px;
						font-weight: bold;
						color: #609ff8;
					}
				}
			}
			.btnTool{
				width: 100%;
				margin-top: 30upx;
				.regist{
					font-size:12px; 
					text-align: center;
				}
			}
			.redBtn{
				width: 100%;
				background:#4886FF;
				padding:10px 0;
				color:white;
				text-align:center;
				border-radius: 5px;
			}
			.forms{
				width: 100%;
				margin-bottom: 60upx;
				.formLine{
					width: 100%;
					margin-bottom: 40upx;
					background: #e6e6e6;
					padding:22upx 26upx;
					box-sizing: border-box; 
					border-radius: 8upx;
					.lineTitle{
						width: 25%;
						margin-right: 15upx; 
					}
					.lineVal{
						flex: 1;
						.iptBox{
							flex: 1;
						}
					}
				}
			}
			.titles{
				width: 100%;
				margin-bottom:100upx;
				text-align:center;
				.titleOne{
					font-size: 24px;
				}
				.titleTwo{
					color: #999999;
					font-size: 15px;
					margin-top: 20upx;
				}
			}
		}
	}
</style>